<template>
  <div style="width: 100%; height: 100%" class="test">
    <div style="height: 300px; width: 300px; background:red" :style="{'zoom': small ? 0.5 : 1}" ref="node" @click="test"></div>
  </div> 
    
</template>
<script setup lang="ts" >
import {ref, onMounted, computed} from 'vue'; 
// import {DvHeader, DvPage, DvBox } from '$comp/index';
const node = ref(null)
const small = ref(false)
const test = () => {
  console.log(node.value) 
  small.value = !small.value
  setTimeout(() => {
    const rect = node.value?.getBoundingClientRect()
    console.log(rect)
  })
}
</script>
<style lang="scss" scoped>
.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   
 }

  
</style>
